<template>
    <div class='w-full h-screen overflow-y-auto bg-nav-bg bg-size-full pb-8'>
        <header class="flex items-center justify-between h-70px px-43px">
            <img class="w-[283px] h-[40px]" :src="logo">
            <n-flex>
                <span class="text-[#9EAADB] text-base">{{ getDateAndWeek }}</span>
                <div class="ml-3" v-if="weatherInfo">
                    <span class="text-[#9EAADB] text-base">{{ weatherInfo.tmp }}°C - {{ weatherInfo.tmp_max }}°C</span>
                    <span class="text-[#9EAADB] text-base ml-2">{{ weatherInfo.cond_txt }}</span>
                </div>
            </n-flex>
        </header>

        <div class="nav-content">
            <div class="flex items-end justify-between">
                <n-flex align="end">
                    <h1 class="text-60px text-[#fff]">下午好！</h1>
                    <span class="text-[#fff] text-31px font-600">欢迎来到霍速办政务E站</span>
                </n-flex>
                <n-flex align="center" :size="26">
                    <n-avatar round :size="50" :src="userAvatar" v-if="token" />
                    <n-button type="info" size="large" @click="toLogin" v-if="!token">登录账号</n-button>
                    <n-popover trigger="click" placement="bottom" class="out-login-popover" :show-arrow="false" v-else>
                        <template #trigger>
                            <div class="flex items-center">
                                <span class="text-[#fff] text-xl">{{ userInfo?.user }}</span>
                                <img class="w-14px icon-arrow-b ml-4" :src="iconArrowB" />
                            </div>
                        </template>
                        <span class="text-[#00102F] text-16px" @click="doLogout">退出登录</span>
                    </n-popover>
                </n-flex>
            </div>
            <n-grid class="mt-67px" x-gap="27" :cols="4">
                <n-gi class="gi-card wsb" @click="$router.push('/online')">
                    <div class="flex flex-col items-center w-[82%] mx-auto">
                        <span class="text-40px text-[#fff] font-bold">网上办</span>
                        <span class="mt-23px text-base text-[#fff] text-center">就近办理，服务在线。提供网上高效便捷政务事项办理，还可一键连接政务大厅“座席专员”提供线上面对面视频指导及助办帮办。</span>
                    </div>
                </n-gi>
                <n-gi class="gi-card zxb" @click="$router.push('/consult')">
                    <div class="flex flex-col items-center w-[82%] mx-auto">
                        <span class="text-40px text-[#fff] font-bold">咨询办</span>
                        <span class="mt-23px text-base text-[#fff] text-center">专业解答，无忧办理。提供一对一、全天候的个性化、精准化咨询服务，确保每位用户的问题都能得到及时解决。</span>
                    </div>
                </n-gi>
                <n-gi class="gi-card kqb" @click="toUrl('kqb')">
                    <div class="flex flex-col items-center w-[82%] mx-auto">
                        <span class="text-40px text-[#fff] font-bold">跨区办</span>
                        <span class="mt-23px text-base text-[#fff] text-center">打破界限，服务无界。实现跨区域无缝对接 让服务不再受地域限制，为用户带来更加广阔、便捷的政务服务体验。</span>
                    </div>
                </n-gi>
                <n-gi class="flex flex-col justify-between">
                    <div class="item-card ai" @click="openUrlDetail('znkf')">
                        <span class="text-28px text-[#fff] font-bold">智能客服</span>
                    </div>
                    <div class="item-card kf" @click="openUrlDetail('unit')">
                        <span class="text-28px text-[#fff] font-bold">人工客服</span>
                    </div>
                    <div class="item-card yy" @click="openPreForm">
                        <span class="text-28px text-[#fff] font-bold">帮办预约</span>
                    </div>
                    <div class="item-card to" @click="$router.push('/home')">
                        <span class="text-28px text-[#fff] font-bold">进入系统</span>
                    </div>
                </n-gi>
            </n-grid>
        </div>

        <LoginModal ref="loginModalRef" />
        <LoginOutModal ref="loginOutModalRef" />

        <!-- 新增预审表单 -->
        <n-drawer class="pre-form-drawer" v-model:show="isShowPreFormDrawer" height="90%" placement="bottom">
            <n-drawer-content>
                <template #header>
                    <div class="w-full flex items-center justify-between">
                        <span class="text-xl text-[#fff] font-600">新增预约</span>
                        <n-icon class="cursor-pointer" :size="28" color="#fff" :component="Close" @click="isShowPreFormDrawer = false" />
                    </div>
                </template>
                <div class="w-[40%] mx-auto pt-76px">
                    <Preform ref="preformRef" :matterItem="matterAllData" />
                </div>
                <template #footer>
                    <n-flex>
                        <n-button class="w-110px h-44px" text-color="#DAE9FF" color="#5379db" @click="isShowPreFormDrawer = false">取消</n-button>
                        <n-button class="w-110px h-44px" text-color="#2B4AC6" color="#dae9ff" @click="submitPre">确认预约</n-button>
                    </n-flex>
                </template>
            </n-drawer-content>
        </n-drawer>
        <PreSuccessModal ref="preSuccessModalRef" :info="preInfo" />
    </div>
</template>

<script lang="ts" setup>
    import userAvatar from "@/assets/image/avatar.png"
    import logo from "@/assets/image/logo.png"
    import iconArrowB from "@/assets/image/icon/icon-arrow-rs.png"
    import { getWeatherApi } from "@/api/common"
    import { useUserStore } from "@/store/modules/user"
    import { formateDate } from "@/utils"
    import { Close } from "@vicons/ionicons5"
    import Preform from "./detail/Preform.vue"
    import { getMatterItemApi, postAppointmentApi, type MatterItemRes } from "@/api/home"
    import PreSuccessModal from "./detail/PreSuccessModal.vue"

    const userStore = useUserStore()
    const { userInfo, token } = storeToRefs(userStore)

    const loginModalRef = ref()
    const loginOutModalRef = ref()
    const router = useRouter()
    const matterAllData = ref<MatterItemRes[] | []>([])
    
    onMounted(() => {
        renderWeatherData()
    })

    const weatherInfo = ref<any>(null)
    async function renderWeatherData() {
        const res = await getWeatherApi({location: "101080501"})
        weatherInfo.value = res
    }

    const getDateAndWeek = computed(() => {
        const { date, week } = formateDate(new Date())
        return `${date} 星期${week}`
    })

    const toLogin = () => {
        loginModalRef.value?.openModal()
    }

    const openPreForm = async () => {
        if(!unref(token)) {
            window["$message"].error('请先登录')
            toLogin()
            return
        }

        const { items } = await getMatterItemApi({page: 1, page_size: 999, online: 2})
        matterAllData.value = items
        isShowPreFormDrawer.value = true
    }

    // 退出登录
    const doLogout = () => {
        loginOutModalRef.value?.openModal()
    }

    const openUrlDetail = (url:string) => {
        if(url == 'unit') {
            if(!token.value) {
                window["$message"].error('请先登录')
                loginModalRef.value?.openModal()
                return
            }
            window.postMessage({type: "CREATE_TAB", content: '/other/select-area.html?redirect=http%3A%2F%2Fvaw.tongliao.sugonup.com%2F%23%2F'}, "*")
        }
        // 跳转智能客服
        else if(url == 'znkf') {
            window.postMessage({type: "OPEN_AI"}, "*")
        }
    }


    // 跳转详情
    const toUrl = (pageType:string) => {
        router.push({ name: 'Home', query: {pageType} })
    }

    const isShowPreFormDrawer = ref(false)

    // 提交预约
    const preformRef = ref()
    const preSuccessModalRef = ref()
    const preInfo = ref<any>(null)
    const submitPre = () => {
        preformRef.value?.preformValidate().then(async (isValidate:boolean) => {
            if(isValidate) {
                const res = await postAppointmentApi(preformRef.value?.formParams)
                console.log(res, '======');
                
                window['$message'].success('新增预约成功')
                isShowPreFormDrawer.value = false
                preInfo.value = res
                preSuccessModalRef.value?.openModal()
            }
        })
    }

</script>

<style lang="scss" scoped>
    header {
        background: linear-gradient( 90deg, rgba(18, 4, 146, .1) 0%, rgba(8, 1, 102, .1) 100%);
    }

    .nav-content {
        width: 90%;
        margin: 105px auto 0;

        .icon-arrow-b {
            transform: rotate(90deg);
        }

        .gi-card {
            height: 584px;
            padding-top: 328px;
            cursor: pointer;

            &.wsb {
                background: url("@/assets/image/nav/bg-wsb.png") no-repeat;
                background-size: 100% 100%;
            }
            &.zxb {
                background: url("@/assets/image/nav/bg-zxb.png") no-repeat;
                background-size: 100% 100%;
            }
            &.kqb {
                background: url("@/assets/image/nav/bg-kqb.png") no-repeat;
                background-size: 100% 100%;
            }
        }

        .item-card {
            height: 130px;
            padding-right: 78px;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            cursor: pointer;

            &.ai {
                background: url("@/assets/image/nav/bg-ai.png") no-repeat;
                background-size: 100% 100%;
            }
            &.kf {
                background: url("@/assets/image/nav/bg-kf.png") no-repeat;
                background-size: 100% 100%;
            }
            &.yy {
                background: url("@/assets/image/nav/bg-bbyy.png") no-repeat;
                background-size: 100% 100%;
            }
            &.to {
                background: url("@/assets/image/nav/bg-to.png") no-repeat;
                background-size: 100% 100%;
            }
        }
    }
</style>
<style>
.out-login-popover {
    border-radius: 10px !important;
    padding: 12px 28px !important;
    margin-left: -26px;
    margin-top: 12px !important;
}
</style>